<!-- 封装弹窗，使其可以复用 -->
<template>
	<view class="">
		<u-popup :closeOnClickOverlay="true" @close="show=false" :show='show' :mode='mode' :round='round' v-if='!binding'>
			<view class="box">
				<view class="top">
					<view class="titleBox">
						<slot name='title'></slot>
					</view>
					<view class="message">
						<slot name='message'></slot>
					</view>
				</view>
				<view class="bottomBox">
					<view class="left">
						<slot name='lefts'></slot>
					</view>
					<view class="right">
						<slot name='rights'></slot>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-else :show='show' :mode='mode' :round='round'>
			<view class="bindingBox">
				<slot name='binding'></slot>
				<view class="btnBox">一键绑定</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	export default {
		name: "",
		components: {

		},
		props: {
			show:{
				type:Boolean,
				default:false
			},
			mode:{
				type:String,
				default:'top'|'center'|'bottom'|'left'|'right'
			},
			round:Number|String,
			binding:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {}
		},
		methods: {

		}
		
	}
</script>

<style scoped lang="scss">
.box{
	width: 550rpx;
	.top{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 20rpx;
		font-family: PingFang SC;
		.titleBox{
			font-size: 34rpx;
			font-weight: bold;
			color: #444444;
			margin-bottom: 40rpx;
		}
		.message{
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 20px;
			text-align: center;
		}
	}
	.bottomBox{
		width: 100%;
		height: 78rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		border-top: 2rpx solid rgba(0, 0, 0, .2);
		display: flex;
		.left,
		.right{
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.left{
			border-right: 2rpx solid rgba(0, 0, 0, .2);
			color: #666666;
		}
		.right{
			color: #194FC9;
		}
	}
	
}
.bindingBox{
		width: 100%;
		// background: #fff;
		display: flex;
		flex-direction: column;
		align-items:center ;
		.btnBox{
			width: 80%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #194FC9;
			box-shadow: 0px 6px 8px 0px rgba(82,163,255,0.4400);
			border-radius: 46rpx;
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 70rpx;
		}
}
</style>
